<template>
  <div class="select">
    <div class="select-group" v-for="(item, index) in options" :key="index">
      <div class="select-group__name">
        {{ item.name }}
      </div>
      <div class="select-item" v-for="(odddItem, index) in item.odds">
        <el-checkbox v-model="odddItem.checked" label="" @change="handleChang" />
        <el-input
          v-model="odddItem.value"
          style="width: 120px; height: 100%"
          @change="handleChang"
          :disabled="odddItem.disabled"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
const pkCodes = defineModel({ type: Array })
const options = ref([
  {
    name: '让球',
    odds: [
      {
        code: 'full:R:{value}:0',
      },
      {
        code: 'full:R:{value}:1',
      },
    ],
  },
  {
    name: '得分大小',
    code: 'full:OU',
    odds: [
      {
        code: 'full:OU:{value}:0',
      },
      {
        code: 'full:OU:{value}:1',
      },
    ],
  },
  {
    name: '独赢',
    odds: [
      {
        code: 'full:M:0:0',
        value: '主',
        disabled: true,
      },
      {
        code: 'full:M:0:1',
        value: '客',
        disabled: true,
      },
      {
        code: 'full:M:0:2',
        value: '和',
        disabled: true,
      },
    ],
  },

  {
    name: '让球-上半场',
    odds: [
      {
        code: 'half:R:{value}:0',
      },
      {
        code: 'half:R:{value}:1',
      },
    ],
  },
  {
    name: '得分大小-上半场',
    odds: [
      {
        code: 'half:OU:{value}:0',
      },
      {
        code: 'half:OU:{value}:1',
      },
    ],
  },
  {
    name: '独赢-上半场',
    odds: [
      {
        code: 'half:M:0:0',
        value: '主',
        disabled: true,
      },
      {
        code: 'half:M:0:1',
        value: '客',
        disabled: true,
      },
      {
        code: 'half:M:0:2',
        value: '和',
        disabled: true,
      },
    ],
  },
])

onMounted(() => {
  const keys = []
  pkCodes.value.map(str => {
    const data = str.split(':')

    if (data[1] != 'M') {
      data[2] = '{value}'
    }

    keys.push(data.join(':'))
  })

  console.log('keys', keys)

  options.value.forEach(item => {
    item.odds.forEach(item => {
      const index = keys.findIndex(value => value == item.code)
      if (index != -1) {
        item.checked = true

        if (!item.disabled) {
          item.value = pkCodes.value[index].split(':')[2]
        }
      }
    })
  })
})

const handleChang = () => {
  const array = []

  options.value.forEach(item => {
    item.odds.forEach(item => {
      if (item.checked && item.value) {
        if (item.value.disabled) {
          array.push(item.code)
        } else {
          array.push(item.code.replace('{value}', item.value))
        }
      }
    })
  })

  pkCodes.value = array
}
</script>
<style lang="scss" scoped>
.select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 600px;
  margin: 0 auto;
  padding-top: 9px;
}

.select-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

.select-item {
  flex: 1;
  margin-bottom: 8px;
  &:last-child {
    margin-bottom: 0;
  }
}

.select-group__name {
  text-align: center;
  margin-left: -30px;
  margin-bottom: 8px;
  color: #778090;
}
</style>
